<!--
 * @Author: 胡伟 3247249228@qq.com
 * @Date: 2022-07-13 16:45:31
 * @LastEditors: 胡伟 3247249228@qq.com
 * @LastEditTime: 2022-07-22 16:16:25
 * @FilePath: \first-project\project\src\views\Reception\discount.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <div class="pub-title">最 新 信 息</div>
    <el-alert title="清仓大甩卖" type="error" center :closable="false"> </el-alert>
    <el-row>
      <el-col v-for="(item, index) in list" :key="item.id">
        <el-card>
          <div class="box">
            <h2>【{{ index + 1 }}】 {{ item.title }}</h2>
            <div class="bottom">
              {{ item.content }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'FirstProjectDiscount',

  data() {
    return {
      list: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //获取数据
    async getList() {
      const { data: res } = await this.$http.get('notice')
      this.list = res.data
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  background-image: linear-gradient(to right top, #a98fb3, #a08fb9, #9490bd, #8691c1, #7593c4);
}
.pub-title {
  text-align: center;
  padding: 50px;
  font-size: 36px;
  font-weight: 600;
}
.bottom {
  font-size: 40px;
  color: skyblue;
}
.el-alert {
  margin-bottom: 30px;
}
::v-deep .el-card {
  margin: 10px 20px !important;
}
</style>
